// vue.config.js 是一个可选的配置文件，
// 如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
const path = require("path")
const webpack = require("webpack")
const os = require("os")
const CompressionPlugin = require("compression-webpack-plugin");  // 安装更新时需注意 node 版本不匹配
const isProdOrTest = process.env.NODE_ENV !== 'development'

// 以下是 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示：
// const { defineConfig } = require('@vue/cli-service')
// module.exports = defineConfig({
//   transpileDependencies: true
// })

// 项目性能优化：
//    减少处理内容数量： 排除一些内容（按照环境对应的排除），dll，去除source map(生产环境)
//    提高处理效率： 多线程编译，多线程压缩，缓存（默认有），
//    减少操作数量： 去除 webpack 内置操作


module.exports = {  //下面的代码配置现在还全部都是练手写的，以后要重新写配置
  
// =========================================== 设置打包路径  =========================================================================
// =========================================== 设置打包路径  =========================================================================

// 默认值为："/"  如果是这样子的话，打包出来的html文件中就引用不到 js等文件了，因为路劲默认为 "/js/app.js",而html文件和js是同级的
  publicPath: "./",   

  // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。默认：dist文件夹。
  // 始终使用 outputDir 而不要修改 webpack 的 output.path。
  outputDir: "dist",

// 直接生成在dist目录中。放置生成的静态资源 (js、css、img、fonts) 的目录
  assetsDir:'assets',  //默认值：""

//============================================ 设置代理服务: =========================================================================
//============================================ 设置代理服务: =========================================================================
  // 原理：开发环境下，vue渲染服务和接⼝代理服务都是webpack-dev-server同⼀个，所以⻚⾯与代理接⼝之间不再跨域。
  // 如果 package.json 中也配置了 vue-cli-service serve 指令 后面的配置项，那么就会以 package.json 中的配置项为准
  devServer: {                            // 配置开发服务器的行为（也就是 npm run serve 调用指令开启的服务器）
    // proxy: 'http://localhost:4000',
    proxy: {                            //设置代理服务器 （让开发服务器成为代理服务器）
        '/api': {                       // 需要代理的路径，所有以 /api 开头的请求都将被代理。
            target: "http://520it.com:8881/cms",    //这是写死的，
            // target: process.env.VUE_APP_BASE_URL,
            pathRewrite: {
                '^/api': ''         //重写代理请求中的路径。意味着最终请求的 URL 不会包含 /api。例如，/api/users 请求将被重写为 /users。
            },
            // ws: false,           // 如果设置为 true，则表示启用 WebSocket 代理。这通常用于需要 WebSocket 支持的应用场景，
            // changeOrigin: true,  // 如果设置为 true，那么目标服务器看到的请求头中的 Origin 字段将会被修改。况下，代理服务器会保留原始请求的 Origin 头。
            // secure: true,        // 如果设置为 false,允许代理到非 HTTPS 的目标服务器。如果设置为 true，则只允许代理到 HTTPS 的目标服务器。
            // logLevel: 'info',    // 设置代理的日志级别。可以设置为 'debug', 'info', 'warn', 'error', 'silent'。默认为 'info'。
        }
    },
    // server: "http",                   //允许设置服务器和配置项
    open: true,                       //告诉 dev-server 在服务器已经启动后打开浏览器。设置其为 true 以自动打开你的默认浏览器。
    host: "127.0.0.1",                //服务器监听地址，默认是 localhost。
    port: 8081,                       //服务器监听端口
    // https: false,                    //是否启用 HTTPS。
    hot: true,                        //是否启用热更新，默认是 true。
    // hotOnly: false,                  //是否启用热更新，默认是 false。如果设置为 true，那么在热更新失败时，不会回退到全量更新。
    // historyApiFallback: true, //当使用 HTML5 History 模式时，任意的 404 响应都可能需要被替代为 index.html。启用该选项后，当出现 404 错误时，会默认自动返回 index.html。
    // contentBase: false,              //指定静态资源目录位置。默认是项目根目录。 默认值为 false，表示不使用静态资源目录。
    // publicPath: "/",                 //指定开发服务器的公共路径。默认是 /。如果指定了 publicPath，那么所有资源都会以该路径为基准进行引用。
    // watchOptions: {                  //配置文件监视器的行为选项
    //   ignored: /node_modules/, 
    //   usePolling: false, 
    //   aggregateTimeout: 300 
    // }
    // headers: {                       // 在所有响应中添加自定义的 HTTP 头。
      
    // }
    // allowedHosts: ['localhost']      //允许的主机列表，以防止 DNS 重定向攻击。
    // compress: true,                  //是否启用压缩。默认是 true。
    // disableHostCheck: false,         //是否禁用主机检查。默认是 false。如果设置为 true，那么开发服务器将不会检查主机的合法性。
    // clientLogLevel: 'warning',       //客户端日志级别。可以设置为 'debug', 'info', 'warn', 'error', 'silent'。默认为 'info'。
    // noinfo: false,     //当使用 webpack-dev-server 时，默认情况下会在浏览器控制台输出一些信息。如果设置为 true，那么这些信息将不会输出。
    // progress: true,                  //是否显示构建进度。默认是 true。
    // quiet: false,                    //是否静默输出。
    // stats:{ colors: true }           // 控制 webpack 编译信息的详细程度。
    // overlay:{ warnings: true, errors: true }      // 是否在浏览器中显示错误和警告覆盖层。

  },


// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。  默认值："index.html"
  indexPath: 'index.html',


// 是否开启静态资源的文件名中包括hash，以便更好的缓存。   默认值：true
  filenameHashing: true,


// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。默认是开启的
// 这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
  lintOnSave:"default",    //可填项：'boolean'(true:编译警告。) | 'warning'(编译警告) | 'default'（开启，但编译成功） | 'error'(编译失败)

//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
  // runtimeCompiler: false,


/**
 * 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
 * 如有需要，可以设置这个配置。指定某个库在打包的时候需要编译。可能会降低构建速度。
 * 只转译部分特定的依赖：给本选项传一个数组，列出需要转译的第三方包包名或正则表达式即可。
 */
  // transpileDependencies: ['element-ui'],


// 设为false，去除生产环境中的productionSourceMap(.map文件)，可以减少包大小，加速生产环境构建，也可以加密源码
  productionSourceMap: false,     // 默认值：true 如果webpack的 devtool 设置为 'source-map'，那么在生产环境下，以 devtool为准。


  integrity: false,


/**
 * 是否为 Babel 或 TypeScript 使用 thread-loader。通过多线程并行处理文件来加速构建过程。
 * 该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
 * 原理：thread-loader 通过利用 Node.js 的 worker_threads API 或者 child_process 模块来创建 worker 线程，这些线程可以并行处理文件。
 */
  // parallel: false,     // 默认值：require('os').cpus().length > 1    只要你的电脑是一个多核的 CPU，这个值默认就是 true。


// 向 PWA 插件传递选项。
  pwa: {},


// 不进行任何 schema 提要,纲要验证的对象，因此它可以用来传递任何第三方插件选项
  pluginOptions: {},


  css:{
    // // 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。
    // // 设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。
    //   requireModuleExtension:true,
    // // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
    //   extract:true,                                                      //默认值：生产环境下是 true，开发环境下是 false
    // // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
    //   sourceMap:false,                                                   //默认值：false
    // // 向 CSS 相关的 loader 传递配置选项。添加修改 loader 
    //   loaderOptions:{
    //     postcss:{
    //       plugins: [
    //         require('autoprefixer'), // 配置 PostCSS loader，使其使用 autoprefixer 插件来自动为 CSS 规则添加浏览器前缀。
    //       ]
    //     },
    //     css:{},
    //     less:{},
    //     sass:{},
    //     stylus:{},
    //   }, 
  },


/** 在 multi-page 模式下构建应用。
 * 每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：
 * 一个指定了 entry, template, filename, title 和 chunks 属性的对象 (除了 entry 之外都是可选的)；或一个指定其 entry 的字符串。
 */
  // pages: {            // 这里的代码还有问题，不要打开！！！！！！！！！！！！！！！！！！！
  //   // index: {
  //   //   entry: 'src/index/main.js',          // page 的入口  
  //   //   template: 'public/index.html',       // 模板来源
  //   //   filename: 'index.html',              // 在 dist/index.html 的输出
  //   //   title: 'Index Page',                 // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  //   //   chunks: ['chunk-vendors', 'chunk-common', 'index']       // 在这个页面中包含的块，默认情况下会包含提取出来的通用 chunk 和 vendor chunk
  //   // },
  //   // // 当使用只有入口的字符串格式时，
  //   // // 模板会被推导为 `public/subpage.html`
  //   // // 并且如果找不到的话，就回退到 `public/index.html`。
  //   // // 输出文件名会被推导为 `subpage.html`。
  //   // subpage: 'src/subpage/main.js'
  // },


//============================================ chainWebpack: ====================================================================
//============================================ chainWebpack: ====================================================================
//============================================ chainWebpack: ====================================================================  

  /**
   * chainWebpack 使用 webpack-chain 库来维护内部的 webpack 配置，实现配置的链式调用，允许对内部的 webpack 默认配置进行更细粒度的修改。使得配置更加简洁和直观。
   * chainWebpack是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例.
   */
  chainWebpack(config) {
    // console.log(config);       // 它的输出内容暂时放在了 readme.md 文件中
    // console.log("111111", config.store);
    // console.log("222222" ,config.devServer);
    // console.log("333333" ,config.module);
    // console.log("444444" ,config.plugins);
    // console.log("555555" ,config.resolve);
    // console.log("666666" ,config.optimization);
    // console.log("777777" ,config.output);
    // console.log("888888" ,config.performance);
    
    // 修改 Loader 选项
      // config.module
      // .rule('vue')      // 这里表示我要处理 操作vue文件的loader
      // .use('vue-loader')
      //   .tap(options => {
      //     return options      // 修改它的选项...
      //   })

    // 添加一个新的 Loader，
      // config.module
      //   .rule('graphql')
      //   .test(/\.graphql$/)
      //   .use('graphql-tag/loader')
      //     .loader('graphql-tag/loader')
      //     .end()

    // 替换一个规则里的 Loader
      // const svgRule = config.module.rule('svg')
      // // 清除已有的所有 loader。
      // // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
      // svgRule.uses.clear()
      // svgRule
      //   .use('vue-svg-loader')
      //     .loader('vue-svg-loader')


    // 修改插件选项
      // config
      //   .plugin('html')
      //   .tap(args => {
      //     return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */]
      //   })  



  // 减少项目不需要的webpack内置操作：
    // 默认开启prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 
    // 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个 webpack 内置功能模块
    // config.plugins.delete('prefetch');

    // config.performance.set("hints", false)  //清除webpack打包文件体积过大的警告

    if (process.env.NODE_ENV === 'development') {

  // 排除一些操作不需要编译     这里的代码暂时不用打开：
        // config.module.rule("js").exclude
        //   .add(resolve("/node_modules"))
        //   .add(resole("src"))


  // 多进程编译:    默认好像是开启的，下面是手动的对他们进行配置：规定多核线程的处理规则
  // 原理：thread-loader 通过利用 Node.js 的 worker_threads API 或者 child_process 模块来创建 worker 线程，这些线程可以并行处理文件。
  // 这个优化方式的效果不明显，甚至会增加时间。因为开启进程也需要时间
        // config.module.rule("vue").use("thread-loader").loader("thread-loader")
        //   .tap(()=>{
        //     return {
        //       worker: os.cpus().length
        //     }
        //   })
        //   .before("vue-loader")

    }else {

  // 启动Gzip压缩 CompressionWebpackPlugin
        // config.plugin('CompressionPlugin').use(
        //     new CompressionPlugin({
        //         algorithm: 'gzip',  //压缩算法/功能
        //         filename: "[path][base].gz",    //生成的目标文件的文件名
        //         test: /\.(js|css|html)$/,// 匹配文件名。匹配的文件都要压缩
        //         // include, //包括所有符合这些条件的资产 都要压缩
        //         // exclude, //排除所有符合这些条件的资产 不要压缩
        //         threshold: 10240,               // 对超过10kb的文件gzip压缩
        //         minRatio: 0.8,                 //压缩比。默认0.8 仅处理压缩比此比率更好的资产
        //         deleteOriginalAssets: false, // 不能删除源文件(原有js)，不然报错"Uncaught SyntaxError: Unexpected token <"
        //         // compressionOptions,     //最大可用压缩级别，对于gzip： { level: 9 }
        //     })
        // );
    }
  },

  //============================================ configureWebpack: ====================================================================
  //============================================ configureWebpack: ====================================================================
  //============================================ configureWebpack: ====================================================================

  /**
  * Webpack 5 运行于 Node.js v10.13.0+ 的版本。所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）
  * 如果要根据 webpack.config.js 中的 mode 变量更改打包行为，则必须将配置导出为函数，而不是导出对象：
  */
  // configureWebpack: config => {                    // 第一个参数 config 会收到已经解析好的配置。
  //   if (process.env.NODE_ENV === 'development') {
  //     // 为开发环境修改配置...
  //   } else {
  //     // 为生产环境修改配置...
  //   }
  // },
  configureWebpack: {
  //============================================ 编译的入口: ===========================================================================
  //============================================ 编译的入口: ===========================================================================

  // 单页应用(SPA)：一个入口起点，多页应用(MPA)：多个入口起点。
    entry:"./src/main.js",  //单入口起点：main入口名称，可作为chunk名，默认为app

  //============================================ 输入的出口: ===========================================================================
  //============================================ 输入的出口: ===========================================================================

    output:{   
      // 入口名称:[name]/内部 chunk id:[id]/生成的内容产生的 hash：[contenthash]/多个替换组合
      filename: "[name].[chunkhash:5].bundle.js",   
      //__dirname: 当前文件所在目录的绝对路径。
      // __filename：当前文件的绝对路径，默认值为dist。如果设置outputDir字段更改了生成的文件夹，这个参数就要对应上
      path: path.resolve(__dirname, "dist"),

      // 下面是默认设置：
      // asyncChunks: true,         // 创建按需加载的异步 chunk。默认值为true
      // chunkLoadTimeout: 120000,     // chunk 请求到期之前的毫秒数，默认为 120000。
      // clean: true,               // 在生成文件之前清空 output 目录
    },


  //============================================ 使用的loader配置: =====================================================================
  //============================================ 使用的loader配置: =====================================================================
  /**webpack 内部使用了的 loader：
   *   babel-loader: 转换 ES6 代码为 ES5 代码。
   *   vue-loader-v15: 解析 Vue 单文件组件 (SFC)。
   *   style-loader: 将 CSS 模块注入到 HTML 文件中。   
   *   css-loader: 解析 CSS 文件，并将 CSS 转换为 JavaScript 模块。
   *   postcss-loader: 使用 PostCSS 处理 CSS。
   *   sass-loader: 解析 SCSS/SASS 代码。
   *   less-loader: 解析 LESS 代码。
   *   stylus-loader: 解析 Stylus 代码。
   *   vue-style-loader: 解析 Vue 单文件组件 (SFC)。
   *   pug-plain-loader: 解析 Pug 模板。
   *   raw-loader: Pug 模板相关，加载文件内容作为字符串。
   */
  // 使用 vue-cli-service inspect 指令 用来审查一个 Vue CLI 项目的 webpack config。 也可以用 vue inspect > 文件名.js 输出配置文件

  // 下面关于 loader 的配置 可能存在出错误，谨慎打开！！！！！！！！！！！！！！！！！！！！！！！！！！！！
    module:{
      rules:[
        // {                 // 处理 js文件的loader设置。   
        //   test: /.js$ / ,
        //   // include: [resolve( ' src ')],
        //   exclude: /node_modules/ ,
        //   // id后面的内容对应下面
        //   // loader: 'happypack/ loader?id=happybabel',    // 这里是只设置一个loader的行为    happypack已过时
        //   use: [
        //     /** 使用 'thread-loader' 多线程的缺点：
        //      *  内存消耗: 创建多个 worker 线程会增加内存消耗。对于内存有限的环境，过度使用 worker 线程可能会导致性能下降。
        //         初始化开销: 每个 worker 线程启动时都会有初始化开销，
        //         兼容性: 如果项目需要在旧版本的 Node.js 上运行，可能需要考虑 thread-loader 的兼容性问题，worker_threads API 是相对较新的特性。
        //     */
        //     {
        //       loader: 'thread-loader',    // 需将此 thread-loader 放置在其他 loader 之前。
        //       options: {
        //         workers: 4,               // 指定使用 4 个 worker 线程    默认情况下，thread-loader 会根据 CPU 核心数自动选择一个合适的数量。
        //         poolTimeout: 30000,       // 指定 worker 线程在空闲状态下的存活时间。一旦超过这个时间，空闲的 worker 线程将被销毁。
        //         name: 'worker-[hash].js'  // 指定生成的 worker 文件名模板。默认情况下，thread-loader 会为每个 worker 生成一个唯一的文件名。
        //         workerParallelJobs: 20,   // 一个 worker 进程中并行执行工作的数量。默认值为 20。
        //       }
        //     },
        //     {
        //       loader: 'babel-loader',
        //       options: {
        //         presets: [
        //           [
        //             '@babel/preset-env',
        //             {
        //               useBuiltIns: 'usage',
        //               corejs: { version: 3 },
        //               targets: {
        //                 chrome: '60',
        //                 firefox: '50'
        //               }
        //             }
        //           ]
        //         ],
        //         // 开启babel缓存    第二次构建时，会读取之前的缓存
        //         cacheDirectory: true
        //       }
        //     }
        //   ],
        // },
        

        // {                   // 处理 CSS 文件。还没安装loader
        //   test: /\.less$/i,
        //   use: [
        //     {
        //       loader: 'style-loader',
        //       options:{
        //         injectType: styleTag,   // 配置把 styles 插入到 DOM 中的方式
        //         attributes: {},    // 添加自定义属性到插入的标签中
        //         insert: "head",   //	在指定的位置插入标签
        //         styleTagTransform: undefined, // 当将 'style' 标签插入到 DOM 中时，转换标签和 css
        //         base: true,       // 基于 (DLLPlugin) 设置 module ID
        //         esModule: false, // 使用 ES 模块语法
        //       }
        //     },
        //     {
        //       loader: 'css-loader',
        //       options:{
        //         url: true,    // 启用/禁用 url()/image-set() 函数处理。如果设置为 false，css-loader 将不会解析 url 或者 image-set 中的任何路径。
        //         import: true,    // 启用/禁用 @import 处理。如果设置为 false，css-loader 将不会解析 @import 规则。
        //         modules: {auto: true},   //启用/禁用 CSS 模块及其配置
        //         sourceMap: compiler.devtool, // 是否生成sourceMap
        //         importLoaders: 0, // 启用/禁用或者设置在 css-loader 前应用的 loader 数量
        //         esModule: true, // 使用 ES 模块语法
        //         exportType: [] // 允许导出样式为模块数组、字符串或者 可构造样式
        //       },
        //     },
        //     {
        //       loader: 'less-loader',
        //       options: {
        //         lessOptions: {
        //           strictMath: true,
        //         },
        //         sourceMap: compiler.devtool, // 是否生成sourceMap
        //         webpackImporter: true // 是否启用默认的 webpack importer。 默认为 true
        //       },
        //     },
        //     {
        //       loader: 'postcss-loader',
        //       options: {
        //         postcssOptions: {   // 设置 PostCSS 选项与插件
        //           plugins: [
        //             [
        //               'postcss-preset-env',
        //               {
        //                 // 其他选项
        //               },
        //             ],
        //           ],
        //         },
        //         execute: undefined, // 在 CSS-in-JS 中启动 PostCSS Parser 支持
        //         sourceMap: compiler.devtool, // 是否生成sourceMap
        //       },
        //     },
        //   ],
        // },

        
        // 图片压缩打包   图片压缩打包    图片压缩打包    图片压缩打包    图片压缩打包    图片压缩打包
        // {
        //   test: /\.(gif|png|jpe?g|svg)$/i,
        //   exclude: /node_modules/,
        //   type: 'asset',
        //   use: [
        //     {
        //       loader: "file-loader",
        //       options: {
        //         name: "[name].[hash:7].[ext]",
        //         outputPath: "img",
        //       },
        //     },
        //     {
        //       loader: "image-webpack-loader",
        //       options: {
        //         mozjpeg: {
        //           progressive: true, 
        //           quality: 60, // JPG 输出的质量 一般60为可接受的
        //         },
        //         optipng: {
        //           enabled: true,
        //         },
        //         pngquant: {
        //           quality: [0.5, 0.65], // PNG 质量范围
        //           speed: 4,
        //         },
        //         // gifsicle: {
        //         //   interlaced: false,// 优化GIF
        //         // },
        //         webp: {
        //           quality: 75, // 转换为 webp
        //         },
        //       },
        //     },
        //   ],
        // },
      ]
    },

  //============================================ 使用的Plugins配置: ====================================================================
  //============================================ 使用的Plugins配置: ====================================================================
  // 使用 vue-cli-service inspect 指令 用来审查一个 Vue CLI 项目的 webpack config。 也可以用 vue inspect > 文件名.js 输出配置文件  
  /** 默认启用的插件：
     *  HtmlWebpackPlugin: 自动生成html文件，并自动引入打包后的js文件
     *  DefinePlugin: 在 编译时 将你代码中的变量替换为其他值或表达式。定义全局常量，可以在编译时注入环境变量或配置信息。
     *  caseSensitiveModulesPlugin: 使 webpack 在编译时对文件名大小写敏感。
     *  friendlyErrorsWebpackPlugin: 在编译出现错误时，在浏览器中显示友好的错误信息。
     *  vueLoaderPlugin: 处理.vue文件
     *  copyPlugin: 将单个文件或整个目录复制到构建目录。
     * 
     *  // NoEmitOnErrorsPlugin: 确保在有编译错误时不会输出 bundle。跳过输出阶段
     *  // ProgressPlugin: 在构建过程中显示进度条。报告编译进度
     *  // NamedChunksPlugin: 为每个 chunk 分配一个易于理解，有意义的名字。  NamedModulesPlugin: 为模块分配易于理解的名字，方便调试。
     *  // HashedModuleIdsPlugin:  为模块分配基于哈希的 ID。
     * */  

    plugins:[
      // new HtmlWebpackPlugin(), //默认配置：在我们打包生成dist文件时， 自动根据我们的template模板来生成index.html文件。不需要我们手动创建。


      // 告诉 webpack 哪些第三方库不用再打包了。  后面一步还要去html文件中引入 wendor.dll.js代码文件
      // 此插件会把 DllPlugin 插件创建的 dll-only-bundles 引用到需要的预编译的依赖中。
      // new webpack.DllReferencePlugin({
      //   context: process.cwd(),
      //   manifest: require("./public/vendor/vendor-manifest.json")
      // }),

      // // 在 编译时 将你代码中的变量替换为其他值或表达式。定义全局常量，可以在编译时注入环境变量或配置信息。
      // new webpack.DefinePlugin({
      //   SERVICE_URL: JSON.stringify('https://dev.example.com'),  
      //   PRODUCTION: JSON.stringify(true),
      //   VERSION: JSON.stringify('5fa3b9'),
      //   BROWSER_SUPPORTS_HTML5: true,
      //   TWO: '1+1',
      //   'typeof window': JSON.stringify('object'),
      //   'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      // }),

      // // 在 watch 模式下忽略指定的文件或文件夹。
      // new webpack.WatchIgnorePlugin([/\.js$/, /\.d\.ts$/]), 

      // // 为每个 chunk 文件头部添加 banner。
      // new webpack.BannerPlugin({
      //   banner: string | function, // 其值为字符串或函数，将作为注释存在
      //   raw: boolean, // 如果值为 true，将直接输出，不会被作为注释
      //   entryOnly: boolean, // 如果值为 true，将只在入口 chunks 文件中添加
      //   test: string | RegExp | [string, RegExp], // 包含所有匹配的模块
      //   include: string | RegExp | [string, RegExp], // 根据条件匹配所有模块
      //   exclude: string | RegExp | [string, RegExp], // 根据条件排除所有模块
      //   footer?: boolean, // 如果值为 true，banner 将会位于编译结果的最下方
      // }),

      // new HappyPack({    
      //   id: 'happybabel',
      //   loaders: [ ' babel-loader?cacheDirectory '],
      //   threads: 4  //开启4个线程
      // }),

      new CompressionPlugin({
        algorithm: 'gzip',  //压缩算法/功能
        filename: "[path][base].gz",    //生成的目标文件的文件名
        test: /\.(js|css|html)$/,// 匹配文件名。匹配的文件都要压缩
        // include, //包括所有符合这些条件的资产 都要压缩
        // exclude, //排除所有符合这些条件的资产 不要压缩
        threshold: 10240,               // 对超过10kb的文件gzip压缩
        minRatio: 0.8,                 //压缩比。默认0.8 仅处理压缩比此比率更好的资产
        deleteOriginalAssets: false, // 不能删除源文件(原有js)，不然报错"Uncaught SyntaxError: Unexpected token <"
        // compressionOptions,     //最大可用压缩级别，对于gzip： { level: 9 }
      })
    ],

  //============================================ 使用的模式: ==========================================================================
  //============================================ 使用的模式: ==========================================================================

  /** 告知 webpack 使用相应模式的内置优化。默认值为 production
  * development： 将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。
  * production：将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称，
  */
    mode: "production",       //配置项值：'none' | 'development' | 'production'

  //============================================ devtool: ============================================================================
  //============================================ devtool: ============================================================================

  // 控制是否生成，以及如何生成 source map  相当于vue-cli中的 productionSourceMap
    // devtool: "source-map",

  //============================================ resolve: ============================================================================
  //============================================ resolve: ============================================================================

  // 配置模块如何解析
    resolve:{
      // alias: {    //可以通过别名来映射一个路径，让webpack更快的找到路径
      //   '@': resolve('./src'),
      //   'assets': resolve('./src/assets'),
      //      'css': resolve('src/assets/css'),
      //   'images': resolve('./src/assets/img'),
      // },   
      // extensions:[".ts", ".js"],  //忽略的文件类型不需要后缀  
    },


  //============================================ 优化optimization: ===================================================================
  //============================================ 优化optimization: ===================================================================

  // 优化：webpack4中会根据mode来执行不同的优化
    optimization: {
      //  concatenateModules: true,   //开启scope Hoisting 分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去。

      // /**
      //  * runtimeChunk可选值有：true或'multiple'或'single'。true或'multiple'会有每个入口对应的chunk。
      //  * 不过一般情况下，考虑到要模块初始化，设置为single就够多数情况下使用啦。
      //  * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk
      //  * */
      //  runtimeChunk: 'single',

      // /**
      //  * 以前是CommonsChunkPlugin，现在换成optimization.splitChunks。普通项目下方的配置就足够用啦
      //  * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks
      //  * */
      // splitChunks: {
      //   chunks: 'all', // 可选值：all，async 和 initial。all功能最强大，所以咱们就使用all
      //   maxInitialRequests: Infinity, // 最大并行请求数，为了以防万一，设置无穷大即可
      //   minSize: 20000, // 引入的模块大于20kb才做代码分割，官方默认20000，
      //   maxSize: 60000, // 若引入的模块大于60kb，则告诉webpack尝试再进行拆分
      //   cacheGroups: {
      //     vendors: {
      //       test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
      //       priority: -10, // 优先级值越大优先级越高，默认-10，不用修改
      //       name(module) { // 设定分包以后的文件模块名字，按照包名字替换拼接一下
      //         const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
      //         return `npm.${packageName.replace('@', '')}`
      //       },
      //     },
      //   },
      // },    
    },

  // 以上是 webpack 的最重要的八个方面的配置项!!!       以上是 webpack 的最重要的八个方面的配置项!!!       以上是 webpack 的最重要的八个方面的配置项!!!       以上是 webpack 的最重要的八个方面的配置项!!!
  // 以上是 webpack 的最重要的八个方面的配置项!!!       以上是 webpack 的最重要的八个方面的配置项!!!       以上是 webpack 的最重要的八个方面的配置项!!!       以上是 webpack 的最重要的八个方面的配置项!!!
  // 以上是 webpack 的最重要的八个方面的配置项!!!       以上是 webpack 的最重要的八个方面的配置项!!!       以上是 webpack 的最重要的八个方面的配置项!!!       以上是 webpack 的最重要的八个方面的配置项!!!

  //============================================ 其他: =============================================================================
  //============================================ 其他: =============================================================================
    // devServer  cache   target    watch   watchOptions   externals   externalsType   externalsPresets   performance   node   stats
    
    // devServer: {},

  //缓存生成的 webpack 模块和 chunk，来改善构建速度,
  //默认情况下，在 开发模式 被设置成 'memory' 而且在 生产模式 中被禁用。
    // cache: {  //value: boolean,object
    //   type:"memory",  //"memory"相当于true
    // },


    // target: false,


    // watch: false,


    // watchOptions: {},


    // 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
    // externals: {}


    // externalsType: 'promise',


    // externalsPresets: {},


  // 配置展示性能提示，比如一个资源超过 250kb，webpack 会对此输出一个警告来通知你。
  // 开发模式中设置这个配置，运行的时候就会提示过大的资源
    // performance: {
    //   hints: 'warning',     //默认 warning。  string = 'warning': 'error' | 'warning' boolean: false
    //   axAssetSize: 100000,  //(单位: bytes)
    // },


    // node: {},


    // stats: {},

  },

}